import { useState } from "react"
import LanguageSvgUrl from "./assets/language.svg";
import LanguageGraySvgUrl from "./assets/language-gray.svg";

export default function LanguageSwitcher({ currentLanguage, position = "top" }) {
    const translations = {
        en: {
            search: "Search",
            language: "Language",
            menu: "Menu",
        },
        ar: {
            search: "بحث",
            language: "لغة",
            menu: "قائمة",
        },
    }
    const [isLangDropdownOpen, setIsLangDropdownOpen] = useState(false)
    const t = translations[currentLanguage]
    return (<div className="language-selector">
        <button
            className="language-button"
            onClick={() => setIsLangDropdownOpen(!isLangDropdownOpen)}
            aria-label={t.language}
        >
            <img src={position === "bottom" ? LanguageGraySvgUrl : LanguageSvgUrl} className="h-4 w-4 md:h-6 md:w-6" />
        </button>

        {isLangDropdownOpen && (
            <div class="language-dropdown" className={`language-dropdown ${position === "bottom" && "bottom-full !top-auto min-h-[5rem]"}`}>
                <a href="/" className={currentLanguage === "en" ? "active" : ""}>
                    English
                </a>
                <a href="/ar/" className={currentLanguage === "ar" ? "active" : ""}>
                    العربية
                </a>
            </div>
        )}
    </div>)
}